<template>
  <div class="main-menu">
    <div class="left">
      <div class="menu-main">
        <Menu
          :select-list="menuJson"
          :menu-list="menuList"
          :defActiveName="activeName"
          :key="activeName"
          ref="menu"
          @topChange="topChange"
        />
      </div>
      <!-- 面料 -->
      <div class="shop-list" v-if="activeName === 0">
        <div class="list-part thumb" @click="() => router.push(`${path}/make`)">
          <Advertising :imgHeight="`1.3552rem`" />
        </div>
        <div class="list-part thumb" @click="() => router.push(`${path}/make`)">
          <Advertising :imgHeight="`1.3552rem`" />
        </div>

        <div class="list-part"></div>
        <div class="list-part"></div>
      </div>
      <!--  -->

      <!-- 现货 -->
      <div class="spot-list" v-else-if="activeName === 1">
        <div class="list-part thumb" @click="()=>router.push(`${path}/spotDetail`)"><Spot :imgHeight="`1.3552rem`" /></div>
        <div class="list-part thumb" @click="()=>router.push(`${path}/spotDetail`)"><Spot :imgHeight="`1.3552rem`" /></div>
        <div class="list-part thumb" @click="()=>router.push(`${path}/spotDetail`)"><Spot :imgHeight="`1.3552rem`" /></div>
        <div class="list-part thumb" @click="()=>router.push(`${path}/spotDetail`)"><Spot :imgHeight="`1.3552rem`" /></div>
        <div class="list-part thumb" @click="()=>router.push(`${path}/spotDetail`)"><Spot :imgHeight="`1.3552rem`" /></div>
        <div class="list-part thumb" @click="()=>router.push(`${path}/spotDetail`)"><Spot :imgHeight="`1.3552rem`" /></div>
        <div class="list-part"></div>
        <div class="list-part"></div>
      </div>
      <!-- 面料 左侧 -->
      <div class="fabric-list" v-else-if="activeName === 2">
        <div class="list-part thumb" v-for="item in fabricItem" @click="()=>router.push( `${path}/fabricDetail`)">
          <Fabric :item="item" :img-height="`1.5108rem`" />
        </div>

        <div class="list-part"></div>
        <div class="list-part"></div>
        <div class="list-part"></div>
        <div class="list-part"></div>
      </div>
    </div>
    <!--  -->


    <!-- MTM产品 右侧广告位 -->
    <div class="right" v-if="activeName === 0">
      <div class="right-adv"  @click="() => router.push(`${path}/make`)"><Advertising /></div>
      <div class="right-adv"  @click="() => router.push(`${path}/make`)"><Advertising /></div>
      <div class="right-adv"  @click="() => router.push(`${path}/make`)"><Advertising /></div>
      <div class="right-adv"  @click="() => router.push(`${path}/make`)"><Advertising /></div>
    </div>
    <!--  -->

    <!--现货 辅料  右侧广告位 -->
    <div class="right" v-else-if="activeName === 1">
      <div class="right-adv" @click="()=>router.push( `${path}/fabricDetail`)"><Spot /></div>
      <div class="right-adv" @click="()=>router.push( `${path}/fabricDetail`)"><Spot /></div>
      <div class="right-adv" @click="()=>router.push( `${path}/fabricDetail`)"><Spot /></div>
      <div class="right-adv" @click="()=>router.push( `${path}/fabricDetail`)"><Spot /></div>
    </div>
    <!--  -->
  </div>
</template>
<script setup lang="ts" name="">
import { computed, ref } from "vue";
import Menu from "@/components/Menu/index.vue";
import Spot from "@/components/Goods/Spot/index.vue";
import Fabric from "@/components/Goods/Fabric/index.vue";
import Advertising from "@/components/Goods/Advertising/index.vue";
import { useRoute, useRouter } from "vue-router";
import fabricJson from "@/json/fabric.json";
import fabricItem from "@/json/fabricItem.json";
import mtmJson from "@/json/mtm.json";
import spotJson from "@/json/spot.json";
const menu = ref<InstanceType<typeof Menu>>();
const route = useRoute();
const router = useRouter();

// const path = computed(() => route.path);  //不跳到对应供应商

const path = computed(() =>{
   let pathSplit = route.path.split('/');
   return  pathSplit[1] === 'supplier' ? route.path : '/supplier' + route.path ;  //跳到内页之后变成供应商页面
}  );     //跳到对应供应商

const activeName = computed((): number =>
  !route.query.activeName ||
  !/^[0-9]+.?[0-9]*/.test(route.query.activeName as string) ||
  Number(route.query.activeName) > 2
    ? 0
    : Number(route.query.activeName)
);
interface MenuList {
  title: string;
  params?: {
    path: string;
  };
}
const menuList = computed((): Array<MenuList> => {
  return [
    { title: "MTM产品", params: { path: `${path.value}?activeName=0` } },
    {
      title: "现货/辅料/样衣/样册",
      params: { path: `${path.value}?activeName=1` },
    },
    { title: "面料", params: { path: `${path.value}?activeName=2` } },
  ];
});

const topChange = (item: MenuList) =>
  item.params ? router.push(item.params.path) : "";

const menuJson = computed(() => {
  switch (activeName.value) {
    case 1:
      if (
        path.value === `/mtm/spot/index` ||
        path.value === `/supplier/mtm/spot/index`
      ) {
        //现货
        menu.value?.initSel([
          {
            classIndex: 0,
            value: 0,
          },
        ]);
      } else if (
        path.value === `/mtm/spot/ingredients` ||
        path.value === `/supplier/mtm/spot/ingredients`
      ) {
        //辅料
        menu.value?.initSel([
          {
            classIndex: 0,
            value: 1,
          },
        ]);
      } else if (
        path.value === `/mtm/spot/clothes` ||
        path.value === `/supplier/mtm/spot/clothes`
      ) {
        //样衣面料
        menu.value?.initSel([
          {
            classIndex: 0,
            value: 2,
          },
          {
            classIndex: 0,
            value: 3,
          },
        ]);
      }
      return spotJson;
    case 2:
      return fabricJson;
    case 0:
    default:
      return mtmJson;
  }
});

</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
